<template>
    <div>
        <!--新增按钮-->
        <div>
            <div style="margin-top: 10px;display: flex;justify-content: left">
                <el-button icon="el-icon-plus" type="primary" @click="openDialog()">新增</el-button>
            </div>
        </div>
        <!--新增或编辑打开dialog，补充需要展示的字段-->
        <div>
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" >
                <el-form :model="form">
                    <el-col :span="12">
                        <el-form-item label="名称" >
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <div>
                        <el-button @click="closeDialog">取 消</el-button>
                        <el-button type="primary" @click="handlerSave">确 定</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
        <div class="baseTable">
            <!--查询页面，补充需要展示的实体类字段-->
            <el-table
                    stripe
                    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%">
                <el-table-column
                        label="ID"
                        prop="id">
                </el-table-column>
                <el-table-column
                        label="名字"
                        prop="name">
                </el-table-column>
                <el-table-column align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="openDialog(scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "baseDemo",
        data() {
            return {
                dialogFormVisible: false,
                // todo 按照数据库要求保存字段信息
                form: {
                    id:'',
                    name:''
                },
                dialogTitle:'新增',
                search: '',
                tableData: []

            }
        },
        mounted() {
            this.init();
        },
        methods: {
            handlerSave(){
                if(this.dialogTitle=='新增'){
                    //  todo 实现 新增 路径
                    this.postRequest("/",this.form).then(resp=>{
                        if(resp){
                            this.dialogFormVisible = false;
                            this.init();
                        }
                    })
                }else{
                    //  todo 实现 修改 路径
                    this.putRequest("/",this.form).then(resp=>{
                        if(resp){
                            this.dialogFormVisible = false;
                            this.init();
                        }
                    })
                }
            },
            // 关闭新增或编辑dialog
            closeDialog(){
                this.dialogFormVisible = false;
            },
            //  todo 为展示元素初始化赋值
            // 打开新增或编辑dialog
            openDialog(row){
                this.dialogFormVisible = true;
                if(row){
                    this.dialogTitle='编辑';
                    this.form.id=row.id;
                    this.form.name=row.name;
                }else{
                    this.dialogTitle='新增';
                    this.form.name='';
                }

            },
            //删除
            handleDelete(row){
                this.$confirm('此操作将永久删除['+row.name+'], 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //  todo 实现 删除 路径
                    this.deleteRequest("/"+row.id).then(resp=>{
                        if(resp){
                            this.init();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 查询
            init(){
                //  todo 实现 查询 路径
                this.getRequest("/").then(resp=>{
                    if(resp){
                        this.tableData = resp.data;

                    }
                })
            }
        }
    }
</script>

<style scoped>
    .baseTable{
        width:1500px;
        margin-top:20px
    }
</style>